Insert Rollover images
A rollover is an image replace by another when the mouse is over it. This kind of image is used on menus and buttons.
If you want to insert a rollover, you need to go to Insert menu, Image objects, and then Rollover Image. In the new window specify the original image and the one that will substitute the former.
It's preferable to activate the Preload rollover image option. If it's active, the rollover image loads when the page loads, so we avoid a download delay when we're over the image.
The Alternate Text is the text you will see when you place the mouse over the image, or the text that will show up when of the image cannot be shown in the browser.
Alternate text can be assigned to all images, not only to rollovers. You can do this through the Alt field in the Properties of the selected image.
Insert Flash Buttons
There is another set of special images similar to rollovers that are used to create menus, these are the Flash buttons.
To insert a flash button you need to go to the Insert menu, Media, and Flash Button option, and you will see this dialogue box:
It's better to save Flash buttons in the same directory of the HTML files, instead of the assigned folder for images. If you don't do this it is possible that the button doesn't work propperly if the url is not an absolute one (because if it is relative and the button is saved in the images folder the URL must be relative to that path).
Remember that buttons will be saved with a SWF extension.
Through the Properties of the flash button, you can edit its attributes again.
In the properties, click on ---play---move your mouse over the image and you will see the flash effect.
Set the Accessibility Attributes.
Note: You can also edit media object attributes by selecting the object and editing the HTML code in Code view, or right-clicking (Windows) or Control-clicking (Macintosh), and selecting Edit Tag Code.
- Title: Enter a title for the media object. Access Key: Enter a keyboard equivalent (one letter) in the text box to select the form object in the browser. This lets a visitor to the site use the Control key (Windows) with the Access Key to access the object.
- For example, if you enter B as the Access Key, use Control+B to select the object in the browser.
- Tab Index: Enter a number for the tab order of the form object. Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order. If you set tab order for one object, be sure to set the tab order for all of them.
Insert Tables
Table
To insert a table go to the Insert menu, and then select the Table option
The Width can be defined in Pixels or as a Percent. The difference between these is that the width in Pixels is always the same, independent of the size of the browser window in which you are viewing the page, whilst the width in Percent shows the percentage of the browser window that will be occuped by the table and there fore it wil be adjusted relative to the size of the browser window. This allows users with a large screen to take advantage of the width of it.
Border thickness indicates the border thickness of the table in pixels. It is assigned a one (1) by default.
Cell Padding indicates the space between the cells content and the their borders.
Cell Spacing indicates the space between the table's cells.
A heading for the table can also be established, and it is recommendable to use headings in the case of users that use screen readers. Screen readers read headings and help the users to follow the table information.
If you want to include a title, set it in the Caption option - the title will show up outside the table.
In align caption we indicate where we want to align the title in respect to the table.
In Summary: we indicate a description for the table which screen readers will read, remember that this text will not be visible in the user's browser.
Some more background colors
http://dye.mychat.to/bgimg.htm
http://sheng.phy.nknu.edu.tw/wjs-1301.htm
http://www.newspace.com.tw/free/mater.asp
click on the bottom links.Cascading Style Sheet
You can define a set of styles, applicable to paragraphs or selected words. These new styles, called CSS Styles, are used to combine a set of text attributes - they can be the color or the size; so isn't necessary to assign those attributes one by one each time you want to repeat the assigning of these same values or other parts of the text.
Many of these options can be used as well to define image attributes, or other characteristics that are not available from HTML tags, like the background color for the text, etc.
A CSS style is no more than a set of format rules that controls the aspect of a web site's content. CSS styles give flexibility and control to the view you are looking for in a Page, from the exact position of the elements to the font designs and specified styles.
One of the big advantages of CSS styles is that they have a simply updating capacity; when you update a CSS style, the format of all the documents with that style are automatically updated.
The disadvantage of working with style sheets is that some browsers cannot support them, although these browsers are usually older versions, and so this will rarely happen.
The characteristics we apply to a text automatically creates CSS styles, which are inlayed in the actual document's heading.
Assignment 4
